import React, { createContext } from 'react'

// 通信方式
// context: vue中的provide/inject 在任何一个上层组件传递数据给下层组件
// 使用步骤: 三个核心步骤
// 1. 创建数据的提供方 Provider 和一个数据的消费方 Consumer
// 2. 来到顶层组件的位置 通过 Provider 提供数据
// 3. 来到下层组件的位置 通过 Consumenr 消费数据

// App[数据提供方式] -> A -> B[使用方]

// 注意：只要能够形成上下级的嵌套关系 都可以使用这套机制进行通信
// 另外这套机制虽然方便 但是酌情使用 最好一个应用里面只使用一次

// context 传递的数据一旦发生变化 消费数据的组件会得到更新

const { Provider, Consumer } = createContext()

const B = () => {
  return (
    <div>
      <Consumer>
        {value => <span>B组件使用数据啦：{value}</span>}
      </Consumer>
    </div>
  )
}
const A = () => {
  return (
    <div>
      <Consumer>
        {value => <p>A组件使用数据啦：{value}</p>}
      </Consumer>
      <B />
    </div>
  )
}


class App extends React.Component {
  state = {
    message: 'this is app message'
  }
  onUpdate = () => {
    this.setState({
      message: 'this is new message'
    })
  }
  render () {
    return (
      <div>
        {/* 提供数据 */}
        <Provider value={this.state.message}>
          <A />
        </Provider>
        <button onClick={this.onUpdate}>update</button>
      </div>
    )
  }
}

export default App